<template>
	<view class="container">
    <UniNavBar />
		<view class="box">
			<view class="register_txt tac">我要补全</view>
      <view class="desc tac">对方同意的情况下才能补全</view>
			<u-form labelPosition="left" :model="ruleForm" :rules="rules" labelWidth="80" ref="uForm" class="uForm"
				:errorType="errorType" :labelStyle="labelStyle">
				<u-form-item label="" prop="account" borderBottom>
          
					<u-input v-model="ruleForm.account" placeholder="输入对方手机号" border="none">
            <u-text
              text="+86"
              slot="prefix"
              margin="0 6rpx 0 0"
              type="tips"
            ></u-text>
					</u-input>
				</u-form-item>
				<view class="ubtn">
					<u-button type="primary" text="确定" @click="submit"></u-button>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import { completion } from '@/api/love.js'
	import UniNavBar from "@/components/uniNavbar/index.vue"
	export default {
		name: 'completion', // 补全
    components:{UniNavBar},
		data() {
			return {
				checked: [false],
				ruleForm: {
					account: '',
				},
				type:'',
				errorType: 'toast',
				labelStyle: {
					color: '#252525',
				},
				rules: {
					account: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						// {
						// 	// 自定义验证函数，见上说明
						// 	validator: (rule, value, callback) => {
						// 		// 上面有说，返回true表示校验通过，返回false表示不通过
						// 		return uni.$u.test.mobile(value);
						// 	},
						// 	message: '手机号码不正确',
						// 	// 触发器可以同时用blur和change
						// 	trigger: ['change', 'blur'],
						// }
					]
				},
			}
		},
		onLoad(option) {
			this.type = option.type
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			async submit() {
				await this.$refs.uForm.validate().then(res => {
					completion({
						'type': this.type,
						'phone':this.ruleForm.account
					}).then(res => {
						console.log('申请补全', res);
						uni.showToast({
							'duration':1500,
							'icon':'none',
							'title':res.msg
						})
						if(res.code == 1){
							setTimeout(function() {
								uni.navigateBack()
							}, 1000);
						}
						
					});
				}).catch(errors => {
					console.log(errors)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		background: #fff;
		.box {
			padding: 100rpx 100rpx 0;

			.register_txt {
				font-size: 42rpx;
        color: $uni-text-color;
        font-weight: bold;
			}
       .desc {
        margin-top: 45rpx;
        font-size: 26rpx;
        color: $uni-text-color-grey;
        line-height: 36rpx;
      }

			.uForm {
				margin-top: 160rpx;
				.ubtn {
					margin-top: 86rpx;
          /deep/ .u-button--primary {
            border-radius: 86rpx;
          }
          
				}
			}
		}
	}
</style>